import {
    ReactChild,
    ReactFragment,
    ReactPortal,
    useEffect,
    useState,
} from 'react';
import { Link, useDispatch, useSelector } from 'umi';
import { Form, Input, Select, Button, Table, Tag, Radio, Space, Tooltip, Popconfirm, message } from 'antd';
import styles from './index.less';
import classNames from 'classnames';
import 'antd/dist/antd.css';
import { MailModelState } from '@/models/mail';


function mail(this: any) {
    const { mail } = useSelector((state: { mail: MailModelState }) => {
        return {
            mail: state.mail,
        };
    });

    const dispatch = useDispatch();
    const [page, setPage] = useState(1);
    useEffect(() => {
        dispatch({
            type: 'mail/getMailList',
            payload: page,
        });
    }, []);
    let lists = mail.mailList
    console.log(lists);

    const columns: any = [
        {
            title: '发件人',
            dataIndex: 'from',
            id: 'from',

        },
        {
            title: '收件人',
            dataIndex: 'to',
            id: 'to',

        },
        {
            title: '主题',
            dataIndex: 'subject',
            id: 'subject',
        },
        {
            title: "发布时间",
            dataIndex: 'createAt',
            id: 'createAt',

        },

        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 196,
            render: (record: any) => <span>
                <Popconfirm
                    title="确认删除这个评论？"
                    onConfirm={() => {
                        console.log(record);
                        const user = JSON.parse(localStorage.getItem("user") as string)
                        if (user.role === "admin") {
                            dispatch({
                                type: "mail/getMailDelete",
                                payload: {
                                    id: record.id
                                }
                            })
                            message.success("评论已删除")
                        } else {
                            message.error("用户权限不足")
                        }
                    }}
                    okText="确认"
                    cancelText="取消"
                >
                    <a>删除</a>
                </Popconfirm>
            </span>
        },
    ];


    return (
        <main className={styles.layout_Content}>
            <header>
                <div className={styles.breadcrumb}>
                    <span>
                        <span>
                            <Link to={'/'}>工作台</Link>
                        </span>
                        <span className={styles.breadcrumb_Separator}>/</span>
                    </span>
                    <span>
                        <span>
                            <Link to={'/mail'}>邮件管理</Link>
                        </span>
                        <span className={styles.breadcrumb_Separator}>/</span>
                    </span>
                </div>
                <div style={{ margin: '12px 0 0', color: 'red' }}></div>
            </header>
            <main>
                <div>
                    <Form
                        // name="customized_form_controls"
                        layout="inline"
                        className={styles.form_controls}
                    // onFinish={onFinish}
                    >
                        <div className={classNames(styles.ant_row, styles.top)}>
                            <Form.Item label="发件人" name="Thetitle" labelCol={{ offset: 5 }}>
                                <Input
                                    style={{ width: '254px', padding: ' 4px 11px' }}
                                    placeholder="请输入发件人"
                                />
                            </Form.Item>
                            <Form.Item label="收件人" name="Thetitle" labelCol={{ offset: 5 }}>
                                <Input
                                    style={{ width: '254px', padding: ' 4px 11px' }}
                                    placeholder="请输入收件人"
                                />
                            </Form.Item>
                            <Form.Item label="主题" name="Thetitle" labelCol={{ offset: 5 }}>
                                <Input
                                    style={{ width: '254px', padding: ' 4px 11px' }}
                                    placeholder="请输入主题"
                                />
                            </Form.Item>

                        </div>
                        <div className={classNames(styles.ant_row, styles.top)}>
                            <div className={styles.ant_btn}>
                                <Button type="primary">搜索</Button>
                                <Button style={{ margin: '0 8px' }}>重置</Button>
                            </div>
                        </div>
                    </Form>
                    <div>
                        <Table
                            columns={columns}
                            dataSource={lists}
                        />
                    </div>
                </div>
            </main>
        </main>
    );

}

export default mail;
